<template>
  <zx-container>
    <template #zx-primary-search>
      <zx-search-form
        v-model:formData="searchParams"
        :formItems="formItems"
        v-model:page="pages.page"
        @search="searchTable"
      />
    </template>
    <template #zx-primary-header>
      <TableTitle title="FB广告账户弃用记录">
        <el-button
          type="primary"
          icon="Download"
          :loading="exportLoading"
          @click="exportData"
        >
          导出
          <span v-if="exportLoading">（{{ exportProgress }}%）</span>
        </el-button>
      </TableTitle>
    </template>
    <template #zx-primary-container>
      <zx-table
        ref="tableRef"
        height="100%"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        minWidth="150"
      ></zx-table>
      <zx-pagination
        v-model:page="pages.page"
        v-model:size="pages.per_page"
        :total="total"
        @change="getTableData"
      />
    </template>
  </zx-container>
  <DetailDialog :activeRow="activeRow" v-model:show="showDetailDialog" />
</template>

<script setup>
import { useTable } from 'zhixin-ui';
import { platformSiteTypeAll } from '@/api/system';
import {
  fbAdvActAbandonRecordList,
  fbAdvActAbandonRecordExport
} from '@/api/history-manage';
import { formItems, columns, searchParams, injectData } from './tableConst';
import TableTitle from '@/components/TableTitle';
import DetailDialog from './DetailDialog';
import { PAGES, INIT_ORANIZE_PARAMS } from '@/utils/const';
import { exportExcel } from '@/utils';

const props = defineProps({
  activeOranize: {
    type: Object,
    default: () => {}
  }
});

// 表格hooks
const tableRef = ref();
const { loading, tableData, pages, total, getTableData } = useTable(
  fbAdvActAbandonRecordList,
  {
    tableRef,
    searchParams,
    autorun: false,
    pages: PAGES(),
    formItems
  }
);

function initSearchParams() {
  pages.value.page = 1;
  INIT_ORANIZE_PARAMS(searchParams, props.activeOranize);
}
function searchTable(type) {
  if (type === 'reset') initSearchParams();
  getTableData();
}
function initTable(keep) {
  if (!keep) initSearchParams();
  getTableData();
}

// 导出
// 以【.xlsx】excel文档格式导出；
// 文档命名：站点资源-【时间戳】
const exportLoading = ref(false);
const exportProgress = ref(0);
function exportData() {
  exportExcel({
    loading: exportLoading,
    api: fbAdvActAbandonRecordExport,
    params: searchParams,
    progress: exportProgress,
    formItems
  });
}

// 详情
const showDetailDialog = ref(false);
// 详情点击事件
const activeRow = ref({});
function handleDetail(row) {
  activeRow.value = row;
  showDetailDialog.value = true;
}

// 获取所有查询下拉
function getOptions() {
  // 账户类型
  platformSiteTypeAll({ type: 'fb_adv_account_type' }).then(res => {
    const resData = res.data || [];
    formItems.advertisement_account_type_id.options = [
      { label: '全部', value: undefined },
      ...resData.map(item => {
        return { label: item.name, value: item.id };
      })
    ];
  });
}

defineExpose({ initTable, getOptions });
injectData({ handleDetail });
</script>

<style lang="scss" scoped></style>
